<template>
  <view class="layout-container">
    
    <image class="layout-photo" :src="payload.image" mode="aspectFill"></image>
    
    <view class="layout-module">
      <view class="title">{{payload.name}}</view>
      <view class="list">
        <view v-for="(item,index) in payload.room_settings" :key="index" class="item">
          <image class="icon" :src="item.image"></image>
          <view class="name">{{item.name}}</view>
        </view>
      </view>
      <view v-for="(item,index) in payload.facilities" :key="index" class="extra-item">
        <image class="icon" :src="item.image"></image>
        <view class="text">{{item.name}}</view>
      </view>
      <!-- <view class="more-btn">
        <text>更多设施</text>
        <image class="arrow" src="/static/icon/arrow.png"></image>
      </view> -->
      <view class="line"></view>
      <view class="t1">政策与服务</view>
      <rich-text :nodes="nodes"></rich-text>
      <!-- <view class="t1">不可取消</view>
      <view class="t2">订单预订成功后不可取消。若未入住将收取您全额费用￥305(如用优惠券则以券后支付价为准)。订单需等酒店或供应商确认后生效，订单确认结果以携程短信、邮件或app通知为准，如订单不确认将全额退款至您的付款账山</view>
      <view class="t1">发票开具</view>
      <view class="t2">支持普通发票、专用发票，订单确认后可在订单页开具</view> -->
      <view class="line" style="margin-top:100rpx"></view>
      <view class="t1">费用明细</view>
      <view class="cell">
        <view class="label">房费</view>
        <view class="value"><text>￥</text>{{payload.price || payload.market_price}}</view>
      </view>
    </view>
    
    <view class="bottom-btn-wrapper" @click="skipOrder">
      <view class="t1">合计</view>
      <view class="unit">￥</view>
      <view class="money">{{payload.price || payload.market_price}}</view>
      <view class="btn">订</view>
    </view>
    
  </view>
</template>

<script>
  const app = getApp()
  const { format } = require('@/utils/rich-text')
  
  export default {
    data() {
      return {
        type: 1,
        options: {},
        payload: {
          facilities: [],
          room_settings: []
        }
      };
    },
    computed: {
      nodes() {
        return format(this.payload?.policy_services || '')
      }
    },
    methods: {
      skipOrder() {
        // type  1-酒店，2--名宿， 0-时租房
        if (this.type === 1) {
          uni.navigateTo({
            url: `/hotel/confirmOrder?type=${this.type}`
          })
        } else {
          uni.navigateTo({
            url: `/hotel/confirmOrder?type=${this.type}&hotelId=${this.options.hotelId}&roomTypeId=${this.options.roomTypeId}&rentalPriceId=${this.options.rentalPriceId}`
          })
        }
      }
    },
    onLoad(options) {
      this.options = options
      this.type = Number(options?.type || '1')
      if (this.type === 1) {
        this.payload = app.globalData.roomInfo
      } else {
        this.$api.roomTypeDetailApi(options).then(res => {
          this.payload = res.data
          // app.globalData.roomInfo = {
          //   ...res.data,
          //   price: res.data.market_price,
          //   label: res.data.label.split(','),
          //   rentalPriceId: options.rentalPriceId
          // }
        })
      }
    }
  }
</script>

<style lang="scss">
.layout-container {
  background-color: #fff;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom) - 40rpx);
  .line {
    height: 1px;
    width: 100%;
    background-color: #ddd;
  }
  .layout-photo {
    display: block;
    width: 100%;
    height: 380rpx;
    overflow: hidden;
  }
  .layout-module {
    padding: 30rpx;
    box-sizing: border-box;
    .title {
      font-size: 30rpx;
      color: #3C3D3E;
      font-weight: bold;
      margin-bottom: 44rpx;
    }
    .list {
      @include flex(row,center,center);
      border-bottom: 1px solid #eee;
      .item {
        @include flex(column);
        flex: 1;
        .icon {
          width: 44rpx;
          height: 44rpx;
          margin-bottom: 18rpx;
        }
        .name {
          font-size: 24rpx;
          line-height: 34rpx;
          color: #333333;
          margin-bottom: 50rpx;
        }
      }
    }
    .extra-item {
      height: 48rpx;
      @include flex;
      margin: 70rpx 0;
      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 26rpx;
      }
      .text {
        flex: 1;
        overflow: hidden;
        font-size: 24rpx;
        line-height: 34rpx;
        color: #333333;
      }
    }
    .more-btn {
      font-size: 24rpx;
      line-height: 34rpx;
      @include flex;
      margin-bottom: 76rpx;
      .arrow {
        width: 34rpx;
        height: 34rpx;
      }
    }
    .t1 {
      font-size: 30rpx;
      line-height: 42rpx;
      color: #3C3D3E;
      font-weight: bold;
      margin: 30rpx 0;
    }
    .t2 {
      font-size: 30rpx;
      line-height: 42rpx;
      color: #3C3D3E;
    }
    .cell {
      height: 88rpx;
      font-weight: bold;
      background: #F5F6FA;
      border-radius: 8rpx;
      padding: 0 16rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #333333;
      @include flex(row,center,space-between);
      .unit {
        font-size: 24rpx;
        padding-right: 6rpx;
      }
    }
  }
  .bottom-btn-wrapper {
    height: calc(126rpx + env(safe-area-inset-bottom));
    background-color: #fff;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.07);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    @include flex;
    padding-bottom: env(safe-area-inset-bottom);
    .t1 {
      flex: 1;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
    .unit {
      font-size: 24rpx;
      margin-right: 6rpx;
      color: #2A70F9;
    }
    .money {
      font-size: 30rpx;
      color: #2A70F9;
      margin-right: 22rpx;
      font-weight: bold;
    }
    .btn {
      width: 68rpx;
      font-weight: bold;
      height: 42rpx;
      line-height: 42rpx;
      text-align: center;
      background: #2A70F9;
      border-radius: 4rpx;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }
}
</style>
